<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css"
	href="bootstrap/css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="layui/layui.js"></script>
<link rel="stylesheet" href="layui/css/layui.css" media="all">

<style type="text/css">
img {
	width: 120px;
	height: 180px;
	margin: -220px 0px 200px 450px;
	border: 1px solid red;
}
</style>
<title>Insert title here</title>
</head>
<body>
	<div>
		<i class="layui-icon" style="font-size: 25px; color: #1E9FFF;">&#xe614;</i>
		<h2 style="display: inline;">
			系统管理<i class="layui-icon" style="font-size: 20px; color: #1E9FFF;">&#xe65b;</i>
			角色管理
		</h2>
	</div>
	<p>&nbsp;</p>


		<div id="showrole">
			<table class="table table-condensed" style="border: 1px black solid;">
				<tr class="success" style="">
					<td class="danger" colspan="6"><span>组织机构列表</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<span style="float: right;">
							<button type="button" class="btn btn-link" data-toggle="modal"
								data-target="#addRole" data-whatever="@getbootstrap">
								<span class="glyphicon glyphicon-plus">&nbsp;增加角色</span>
							</button>
					</span></td>
				</tr>


				<tr class="success" style="text-align: center;">
					<td style="width: 40px;">排序</td>
					<td>角色名称</td>
					<td class="info" style="width: 280px;">操作</td>
				</tr>


				<tr v-for="role in rolelist" class="success"
					style="text-align: center;">
					<td class="rolesort" style="width: 30px;">{{role.role_sort}}</td>

					<td class="rolename">{{role.role_name}}</td>

					<td class="info" style="width: 380px;">
						<button @click="updatePermission(role.id,$event)" type="button"
							class="btn btn-link" data-toggle="modal"
							data-target="#updatePermission" data-whatever="@getbootstrap">
							<span class="glyphicon glyphicon glyphicon-plus">&nbsp;权限管理</span>
						</button>

						<button @click="updateRole(role.id,$event)" name="updatebutton"
							type="button" class="btn btn-link" data-toggle="modal"
							data-target="#updateRole" data-whatever="@getbootstrap">
							<span class="glyphicon glyphicon-text-height">&nbsp;修改角色</span>
						</button>
						<button @click="deleteRole(role.id)" type="button"
							class="btn btn-link" data-toggle="modal" data-target="########"
							data-whatever="@getbootstrap">
							<span class="glyphicon glyphicon-remove">&nbsp;删除</span>
						</button>
					</td>
				</tr>
			</table>
		</div>
		<div id="fenye"></div>


		<!-- 添加角色表单 -->
		<div class="modal fade" id="addRole" tabindex="-1" role="dialog"
			aria-labelledby="exampleModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
						<h4 class="modal-title" id="exampleModalLabel">添加角色</h4>
					</div>
					<form id="roleform">
					<div class="modal-body" style="width: 70%;">
							<div class="form-group">
								<label for="exampleInputEmail1">角色名称</label> <input type="email"
									class="form-control" name="role_name" placeholder="角色名称">
							</div>
							<div class="form-group">
								<label for="exampleInputPassword1">排序</label> <input type="text"
									class="form-control" name="role_sort" placeholder="排序">
							</div>
					</div>

					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
						<button id="sub" type="button" class="btn btn-primary"
							data-dismiss="modal">提交</button>
					</div>
					</form>
				</div>
			</div>
		</div>

		<!-- 修改角色表单 -->
		<div class="modal fade" id="updateRole" tabindex="-1" role="dialog"
			aria-labelledby="exampleModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
						<h4 class="modal-title" id="exampleModalLabel">修改角色</h4>
					</div>
					<form id="updateroleform">
					<div class="modal-body" style="width: 70%;">
							<div class="form-group">
								<label for="exampleInputEmail1">角色名称</label> <input type="email"
									class="form-control" name="role_name" :value="rolename">
								<input type="hidden" name="id" :value="roleid">
							</div>
							<div class="form-group">
								<label for="exampleInputPassword1">排序</label> <input type="text"
									class="form-control" name="role_sort" :value="rolesort">
							</div>
					</div>

					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
						<button id="updatesub" type="button" class="btn btn-primary"
							data-dismiss="modal">修改</button>
					</div>
					</form>
				</div>
			</div>
		</div>

		<!-- 修改权限-------表单 -->
		<div class="modal fade" id="updatePermission" tabindex="-1"
			role="dialog" aria-labelledby="exampleModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
						<h4 class="modal-title" id="exampleModalLabel">修改权限</h4>
					</div>
						<form id="">
					<div class="modal-body" style="width: 70%;">
							<div class="form-group">
								<label for="exampleInputEmail1">角色名称：{{rolename}}</label>

							</div>
							<div class="form-group">
								<label for="exampleInputPassword1">权限选择</label>
								<hr style="border: 1px red solid;">


								<div id="checkbox"></div>

							</div>
					</div>

					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
						<button id="updatepersub" type="button" class="btn btn-primary"
							data-dismiss="modal">修改</button>
					</div>
					</form>
				</div>
			</div>
		</div>
</body>
<script type="text/javascript">
	var vue2 = new Vue({
		el : "#updatePermission",
		data : {
			rolename : '',
			permissions : '',
			selfpermission : ''

		}

	});//vue2
	var vue1 = new Vue({
		el : "#updateRole",
		data : {
			rolename : '',
			rolesort : '',
			roleid : '',
		}

	});//vue1

	var vue = new Vue(
			{
				el : '#showrole',
				data : {
					rolelist : '',
					roleid : '',
				},
				methods : {
					showrole : function(curr, pagesize) {

						$.ajax({
							url : '../role/queryRole',
							data : {
								"currentpage" : curr,
								"pagesize" : pagesize,
							},
							type : 'post',
							dataType : 'json',
							success : function(result) {
								console.log(result);
								vue.rolelist = result.listRole;
								layui.use('laypage', function() {
									var laypage = layui.laypage;

									//执行一个laypage实例
									laypage.render({
										elem : $("#fenye"),//注意，这里的 test1 是 ID，不用加 # 号
										count : result.totalnum,
										curr : curr,
										limit : pagesize,
										limits : [ 2, 4, 6 ],
										groups : 2,
										theme : '#FFB800',

										layout : [ 'prev', 'page', 'next',
												'limit', 'count', 'skip' ],
										jump : function(obj, first) {

											if (!first) {
												vue.showrole(obj.curr,
														obj.limit);
											}
										}
									});
								});
							}

						})

					},
					updateRole : function(roleid, event) {//更改角 色
						alert("id是" + roleid);
						var button = event.target;//获取当前点击dom对象
						var rolename = $(button).parents("td").siblings(
								".rolename").text();
						var rolesort = $(button).parents("td").siblings(
								".rolesort").text();
						//alert(rolename);
						vue1.rolename = rolename;
						vue1.rolesort = rolesort;
						vue1.roleid = roleid;

					},
					deleteRole : function(roleid) { //删除角色
						if (confirm("确认删除？")) {
							$.ajax({
								url : '../role/delRole',
								data : {
									"roleid" : roleid
								},
								type : 'post',
								dataType : 'text',
								success : function(result) {
									if (result == "success") {
										alert("删除成功");
										vue.showrole(1, 2);

									} else {
										alert("删除失败");
									}

								}
							});//Ajax
						}

					},
					updatePermission : function(roleid, event) {//设置权限管理
						var button = event.target;//获取当前点击dom对象
						var rolename = $(button).parents("td").siblings(".rolename").text();
						vue2.rolename = rolename;
						vue.roleid = roleid;
						$.ajax({
									url : '../role/queryPermission',
									data : {
										"id" : roleid
									},
									type : 'post',
									dataType : 'json',
									success : function(result) {

										$("#checkbox").html("");
										$.each(result.allPermission,function(index, ele) {

											$("#checkbox").append(" <input class='perm' type='checkbox' name='per_id' value="+ele.per_id+"><span>"
													+ ele.per_name+ "</span><br>");
										});

										$.each(result.listPermission,function(index, el) {
										$(".perm").each(function(index) {
											console.log($(this).val());
										if ($(this).val() == el.per_id) {
											$(this).attr("checked",true);
										}
										});

														});

									}
								});//Ajax

					}

				}

			});

	$(function() {
		vue.showrole(1, 2);
		$("#sub").click(function() {
			var formdate = new FormData($("#roleform")[0]);
			$.ajax({
				url : '../role/addRole',
				data : formdate,
				type : 'post',
				dataType : 'text',
				contentType : false,
				processData : false,
				success : function(result) {
					if (result == "success") {
						alert("新增成功");
						$('#roleform')[0].reset();
					} else {
						alert("新增失败");
					}
					vue.showrole(1, 2);

				}

			});//ajax结束

		});//提交事件	

		//修改信息
		$("#updatesub").click(function() {
			var formdate = new FormData($("#updateroleform")[0]);
			$.ajax({
				url : '../role/updateRole',
				data : formdate,
				type : 'post',
				dataType : 'text',
				contentType : false,
				processData : false,
				success : function(result) {
					if (result == "success") {
						alert("修改成功");
					} else {
						alert("修改失败");
					}
					vue.showrole(1, 2);

				}

			});//ajax结束

		});
		//修改权限
		$("#updatepersub").click(function() {
			var arrperid = [];
			var arrpername = [];
			$(".perm:checked").each(function(i) {
				arrperid[i] = $(this).val();
				arrpername[i] = $(this).next("span").text();
			})
			console.log(arrperid);
			console.log(arrpername);
			$.ajax({
				url : '../role/updatePermission',
				data : {
					"arrperid" : arrperid,//权限id数组
					"arrpername" : arrpername,//权限名称数组
					"roleid" : vue.roleid
				//当前角色id

				},
				type : 'post',
				dataType : 'text',
				success : function(result) {
					if (result == 'success') {
						alert("权限修改成功");
						vue.showrole(1, 2);
					}

				}

			});//ajax结束

		});//修改权限          

	});//function
</script>
</html>